<script lang="ts" setup>
import { ref } from 'vue';
import { isSuccess } from '@/utils/response';
import * as service from './api';

const options = ref([]);
const loading = ref(false);

async function search(query: string) {
  if (!query || query.length < 3) {
    return;
  }
  loading.value = true;
  const response = await service.search({ username: query });
  if (isSuccess(response)) {
    options.value = response.data;
  }
  loading.value = false;
}
</script>

<template>
  <n-select
    filterable
    clearable
    remote
    label-field="username"
    value-field="id"
    :loading="loading"
    :options="options"
    @search="search"
  />
</template>
